<template>
  <span class="appellation" :style="{ color: color, fontSize: fontSize + 'px' }">{{
    userInTeam.teamNick || user.name
  }}</span>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const appellation = ref('')
const { account, teamId, ignoreAlias, nickFromMsg } = defineProps({
  account: {
    type: String,
    required: true
  },
  teamId: {
    type: String,
    default: null
  },
  ignoreAlias: {
    type: Boolean,
    default: false
  },
  nickFromMsg: {
    type: String,
    default: null
  },
  color: {
    type: String,
    default: '#333'
  },
  fontSize: {
    type: Number,
    default: 16
  }
})

const user = ref({
  name: ''
})
const userInTeam = ref({
  teamNick: ''
})

watch(
  () => {
    return {
      account: account,
      teamId: teamId
    }
  },
  (val) => {
    // console.log('-------------', val)
    if (val.teamId) {
      uni.$nim.V2NIMTeamService.getTeamMemberListByIds(val.teamId, 1, [account]).then((res) => {
        // console.log('-------------', res)
        userInTeam.value = res[0]
      })
    }
    uni.$nim.V2NIMUserService.getUserList([account]).then((res) => {
      // console.log('-------------', res)
      user.value = res[0]
    })
  },
  {
    immediate: true
  }
)
</script>

<style scoped lang="scss">
.appellation {
  color: #333;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
